<template>
  <Modal
    v-model:active="nameRuleVueActive"
    transfer
    title="命名规则"
    :width="480"
    :height="330"
    @confirm="saveNameRule"
    hide-mask
  >
    <Form>
      <FormItem label="类型">
        <Select
          :options="cardsTypeOptions"
          v-model:value="cardsTypeValue"
        ></Select>
      </FormItem>
      <FormItem label="规则" :error="errorMessage">
        <Input
          v-model:value="cardsRule"
          placeholder="请输入正则表达式，eg 长度不超过8，输入: ^.{0,8}$"
          clearable
        >
          <template #suffix>
            <span v-if="isError" style="color: red">❌</span>
          </template>
        </Input>
      </FormItem>
      <FormItem label="前缀">
        <Input v-model:value="cardPrefix" clearable> </Input>
      </FormItem>
      <FormItem label="后缀">
        <Input v-model:value="cardSuffix" clearable> </Input>
      </FormItem>
    </Form>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRuleStore, useCoreStore } from "@/UI/store";
import { storeToRefs } from "pinia";
import { Modal, Column, FormItem, Select, Input, Form, Message } from "cax-ui";
import { CARDS_TYPE } from "@/FrontProcessing";
const coreStore = useCoreStore();
const { nameRuleVueActive } = storeToRefs(coreStore);

const ruleStore = useRuleStore();

const cardsTypeValue = ref<number>(0);
const cardsRule = ref<string>("");
const cardPrefix = ref<string>("");
const cardSuffix = ref<string>("");
const isError = ref<boolean>(false); // 是否显示 ❌
const errorMessage = ref<string>(""); // 错误信息

const cardsTypeOptions = [
  {
    label: CARDS_TYPE.MATERIAL,
    value: 0,
  },
  {
    label: CARDS_TYPE.PROPERTY,
    value: 1,
  },
  {
    label: CARDS_TYPE.PARTS,
    value: 2,
  },
  {
    label: CARDS_TYPE.ASSEMBLIES,
    value: 3,
  },
];
function saveNameRule() {
  //校验正则表达式
  if (!isValidRegex(cardsRule.value)) {
    isError.value = true;
    errorMessage.value = "请输入有效的正则表达式";
    Message.error("请输入有效的正则表达式");
    setTimeout(() => {
      nameRuleVueActive.value = true;
    }, 0);
    return; // **校验失败，模态框不关闭**
  }
  isError.value = false;
  errorMessage.value = "";
  if (cardsTypeValue.value == 0) {
    ruleStore.setMaterialNameRule(cardsRule.value);
    ruleStore.setMaterialNamePrefix(cardPrefix.value);
    ruleStore.setMaterialNameSuffix(cardSuffix.value);
  }
  if (cardsTypeValue.value == 1) {
    ruleStore.setPropertyNameRule(cardsRule.value);
    ruleStore.setPropertyNamePrefix(cardPrefix.value);
    ruleStore.setPropertyNameSuffix(cardSuffix.value);
  }
  if (cardsTypeValue.value == 2) {
    ruleStore.setPartsNameRule(cardsRule.value);
    ruleStore.setPartsNamePrefix(cardPrefix.value);
    ruleStore.setPartsNameSuffix(cardSuffix.value);
  }
  if (cardsTypeValue.value == 3) {
    ruleStore.setAssembliesNameRule(cardsRule.value);
    ruleStore.setAssembliesNamePrefix(cardPrefix.value);
    ruleStore.setAssembliesNameSuffix(cardSuffix.value);
  }
  Message.info("规则设置成功");
  nameRuleVueActive.value = false;
}
function isValidRegex(input: any) {
  try {
    new RegExp(input); // 尝试编译正则
    return true; // 编译成功，说明是有效正则
  } catch (e) {
    return false; // 编译失败，说明无效正则
  }
}
</script>
